<html>

<head>
  <title>Insert/Edit Form Element SELECT</title>
  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" />
  <script type="text/javascript" src="../../../popups/popup.js"></script>

<script type="text/javascript">
var fields = ["f_name", "f_size", "f_tabindex", "f_multiple", "f_disabled"];

function Init() {
	window.resizeTo(350,320);
  __dlg_translate("Forms");
	__dlg_init();
	var param = window.dialogArguments;
  for (var i in fields) {
    switch (fields[i]) {
    case "f_multiple":
    case "f_disabled":
      document.getElementById(fields[i]).checked = (param[fields[i]]==fields[i].substring(2,20)) || (param[fields[i]] == true); break;
    case "f_size":
      document.getElementById(fields[i]).value = (param[fields[i]]<=0)?"":param[fields[i]]; break;
    default:
      document.getElementById(fields[i]).value = param[fields[i]]; break;
    }
  }
  for (var i=0; i<=param.f_options.length-1; i++) {
		document.getElementById("f_select").options[i] = new Option(param.f_options[i].text, param.f_options[i].value);
	}
  document.getElementById("f_name").focus();
}

function onOK() {
	var el = document.getElementById("f_name");
	if (!el.value) {
  	alert("You must enter a Name");
		el.focus();
	  return false;
	}
  // pass data back to the calling window
  var param = new Object();
  for (var i in fields) {
    switch (fields[i]) { 
    case "f_multiple":
      if (document.getElementById("f_size").value=="1") 
        param["f_multiple"] = "";
      else
  	    param["f_multiple"] = (document.getElementById(fields[i]).checked)?"multiple":"";
	    break;
    case "f_disabled":
      param[fields[i]] = (document.getElementById(fields[i]).checked)?"disabled":""; break;
    default:
      param[fields[i]] = document.getElementById(fields[i]).value; break;
    }
  }
  function optionValues(text,value) {
		this.text = text;
		this.value = value;
	}
	optionNodes = new Array(); // for option text/value pairs
	for (var i=0; i<= document.getElementById("f_select").options.length-1; i++) {
		optionNodes[i] = new optionValues(document.getElementById("f_select").options[i].text, document.getElementById("f_select").options[i].value);
	}
	param["f_options"] = optionNodes;
	__dlg_close(param);
  return false;
}

function onCancel() {
	__dlg_close(null);
	return false;
}


//functions to build select options list
//Populates Label and Value fields with selected option values
function getValues(){
	var d = document;
	d.getElementById("f_optionvalue").value = d.getElementById("f_select").options[d.getElementById("f_select").selectedIndex].value;
	d.getElementById("f_optiontext").value = d.getElementById("f_select").options[d.getElementById("f_select").selectedIndex].text;
	d.getElementById("f_update").value ="Update Option";
}

//Add or update options to the select box
function addItem(item) {
	var d = document;
	if (item.f_optiontext.value =="") {alert("Please enter a Label");}
 	else { 
		if (d.getElementById("f_select").options.selectedIndex != -1) { //update item
			var indx = d.getElementById("f_select").options.selectedIndex;
			d.getElementById("f_select").options[indx].text=d.getElementById("f_optiontext").value;
			d.getElementById("f_select").options[indx].value=d.getElementById("f_optionvalue").value;
		} else { //add new item
			var newItem = d.getElementById("f_select").options.length++;
			d.getElementById("f_select").options[newItem].text=d.getElementById("f_optiontext").value;
			d.getElementById("f_select").options[newItem].value=d.getElementById("f_optionvalue").value;
		}
		d.getElementById("f_select").selectedIndex = -1; //deselect
		d.getElementById("f_optiontext").value="";//clean up
		d.getElementById("f_optionvalue").value="";
		d.getElementById("f_update").value ="Add Option";
		d.getElementById("f_optiontext").focus();
	}
}
//Clears selected option
function deleteItem() {
	var d = document;
	for (var i = d.getElementById("f_select").options.length - 1; i>=0; i--) { 
		var opt = d.getElementById("f_select").options[i]; 
		if (opt.selected) { 
			d.getElementById("f_select").options[i] = null; 
		} 
	} 
	d.getElementById("f_select").selectedIndex = -1; 
	d.getElementById("f_optiontext").value="";
	d.getElementById("f_optionvalue").value="";
	d.getElementById("f_optiontext").focus();
} 
//Moves selected option up
function moveOptionUp() {
	var d = document;
	for (i=0; i<d.getElementById("f_select").options.length; i++) {
		if (d.getElementById("f_select").options[i].selected) {
			if (i != 0 && !d.getElementById("f_select").options[i-1].selected) {
				swapOptions(d.getElementById("f_select"),i,i-1);
				d.getElementById("f_select").options[i-1].selected = true;
			}
		}
	}
}
//Moves selected option down
function moveOptionDown() {
	var d = document;
	for (i=d.getElementById("f_select").options.length-1; i>=0; i--) {
		if (d.getElementById("f_select").options[i].selected) {
			if (i != (d.getElementById("f_select").options.length-1) && ! d.getElementById("f_select").options[i+1].selected) {
				swapOptions(d.getElementById("f_select"),i,i+1);
				d.getElementById("f_select").options[i+1].selected = true;
			}
		}
	}
}
	
function swapOptions(obj,i,j) {
	var o = obj.options;
	var i_selected = o[i].selected;
	var j_selected = o[j].selected;
	var temp = new Option(o[i].text, o[i].value);
	var temp2= new Option(o[j].text, o[j].value);
	o[i] = temp2;
	o[j] = temp;
	o[i].selected = j_selected;
	o[j].selected = i_selected;
}
</script>
</head>

<body class="dialog" onload="Init()">
  <div id="f_type" class="title">Form Element: SELECT</div>
  <form action="" method="get">
    <div class="fr">Name/ID:</div>
    <input type="text" name="name" id="f_name" title="Name of the form select" />
    <p />
    <div class="fr">Size:</div>
    <input name="size" id="f_size" type="text" value="" size="15" />
    <p />
		<div class="fr"><nobr>Multiple Select</nobr></div>
    <input name="multiple" id="f_multiple" type="checkbox" value="multiple" />
    <p />
    <div class="fr">Disabled</div>
    <input type="checkbox" name="disabled" id="f_disabled" value="disabled" />
    <p />
    <div class="fr">Tab Index:</div>
    <input type="text" name="tabindex" id="f_tabindex" />
    <p />
    <div class="space"></div>
    <fieldset id="fldLayout">
	  <legend>Options</legend>
      <table border="0" cellspacing="0" width="100%">
		  <tr>
      <td align="right">
        <select name="select" id="f_select" Size="6" onchange="getValues();"  style="width:16em">
   	    </select>
      </td>
      <td align="center">
        <input type="button" name="up" value="Move Up" style="width:6em" onClick="moveOptionUp()"><br />
	      <input type="button" name="down" value="Move Down" style="width:6em" onClick="moveOptionDown()"><br />
        <input type="button" name="delete" value="Delete" style="width:6em" onClick="deleteItem();">
      </td>
      </tr>
      </table>
      <div class="space"></div>
      <table border="0" cellspacing="0" width="100%">
		  <tr>
			  <td align="right">Lable:</td>
			  <td><input type="text" id="f_optiontext" name="optionText" value="" size="15"></td>
			  <td align="right">Value:</td>
			  <td><input name="optionValue" id="f_optionvalue" type="text" value="" size="15"></td>
        <td><input type="button" name="update" id="f_update" value="Add" onclick="addItem(document.forms[0])"></td>
		  </tr>
		  </table>
	  </fieldset>
	  <div id="buttons">
      <button type="button" name="ok" onclick="return onOK();">OK</button>
      <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
    </div>      
  </form>
</body>
</html>
